<template>

    <a-card class="mb-5">
        <a-form :model="searchFrom"   ref="formRef">
            <a-row :gutter="30">
                <a-col class="gutter-row" :span="4">
                    <a-form-item label="账号" name="username">
                        <a-input v-model:value="searchFrom.username">
                        </a-input>
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="4">
                    <a-form-item label="号码" name="mobile">
                        <a-input v-model:value="searchFrom.mobile">
                        </a-input>
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="4">
                    <a-form-item label="性别" name="sex">
                        <a-select ref="select" v-model:value="searchFrom.sex" @focus="focus" @change="handleChange">
                            <a-select-option value="1">男</a-select-option>
                            <a-select-option value="0">女</a-select-option>

                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="8">
                    <a-form-item label="创建时间" name="createTime">
                        <a-range-picker v-model="searchFrom.createTime"  :show-time="{ format: 'HH' }" format="YYYY-MM-DD HH:mm"
                            :placeholder="['开始时间', '结束时间']" @change="onRangeChange" />
                    </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="4">

                    <a-row :gutter="64">
                        <a-col class="gutter-row" :span="8">
                            <a-form-item>
                                <a-button type="primary" @click="query">查询</a-button>
                            </a-form-item>
                        </a-col>
                        <a-col class="gutter-row" :span="8">
                            <a-form-item>
                                <a-button @click="reset">重置</a-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
        </a-form>
    </a-card>
</template>
<script setup name="Search">
const searchFrom = reactive({
    username: '',
    mobile: '',
    sex: '',
    createTime:[],
    startTime:'',
    endTime:''
});
const formRef = ref();
//定义2个事件 传递给父组件
const emit = defineEmits(['search','reset'])

//重置
const reset = () => {
    formRef.value.resetFields();
    emit('reset',searchFrom) 
};

//查询
const query=()=>{
   emit('search',searchFrom) 
};
const focus = () => {
    console.log('focus');
};
const handleChange = value => {
    searchFrom.sex=value;
    console.log(`selected ${value}`);
};
const onRangeChange = (value, dateString) => {
    searchFrom.startTime = dateString[0];
    searchFrom.endTime = dateString[1];
    console.log('Selected Time: ', dateString[0],dateString[1]);
    console.log('Formatted Selected Time: ', dateString);
};

</script>

<style scoped>
</style>